<template>
  <div class="login-wrapper">
    <Row type="flex" justify="center" align="middle">
      <Col span="24">
        <div>
          <Card class="login-card" :dis-hover="true">
            <div class="login-title">
              <h2>TPSHION</h2>
            </div>
            <Form ref="formInline" :model="formInline" :rules="ruleInline">
              <FormItem prop="user">
                <Input prefix="ios-contact" type="text" v-model="formInline.user" placeholder="账号/手机号/邮箱"/>
              </FormItem>
              <FormItem prop="password">
                <Input prefix="ios-lock-outline" type="password" v-model="formInline.password" placeholder="密码"/>
              </FormItem>
              <FormItem>
                <Button style="width: 100%" :loading="loading" type="success" @click="handleSubmit('formInline')">
                  <span v-if="!loading">登陆</span>
                  <span v-else>正在登录</span>
                </Button>
                <div class="login-tip">
                  <p><a @click="reset">忘记密码？</a></p>
                  <p>尚未拥有账户？ <a @click="register">注册</a></p>
                </div>
              </FormItem>
            </Form>
          </Card>
        </div>
      </Col>
    </Row>
  </div>
</template>

<script>
import {login} from '@/api/user'
import { mapMutations } from 'vuex'
import { checkPhone, checkEmail } from '@/utils/commonUtil'

export default {
  name: 'Login',
  data () {
    return {
      hasError: false,
      loading: false,
      imgSrc:require('../assets/images/login-bg.jpg'),
      formInline: {
        user: 'test',
        password: '123456'
      },
      ruleInline: {
        user: [
          { required: true, message: '请输入账号/手机号/邮箱'}
        ],
        password: [
          { required: true, message: '请输入密码'}
        ]
      }
    }
  },
  methods: {
    ...mapMutations(['saveToken','saveUserInfo']),
    handleSubmit(name) {
      this.loading = true
      this.$refs[name].validate((valid) => {
        if (valid) {
          let loginData = {password: this.formInline.password}
          //判断输入是否为手机号
          if(checkPhone(this.formInline.user)){
            loginData.phone = this.formInline.user
          }else if(checkEmail(this.formInline.user)){
            loginData.email = this.formInline.user
          }else{
            loginData.account = this.formInline.user
          }

          login(loginData).then(res => {
            console.log('res:{}',res)
            this.loading = false
            const {msg,status,data} = res.data
            if(status){
              //保存token
              const {userId,token} = data
              this.saveToken(token)
              //保存用户信息
              this.saveUserInfo({userId})
              this.$router.push({name:'main'})
            }else{
              this.message(msg)
            }
          }).catch(() => {
            this.loading = false
          })
        } else {
          this.loading = false
        }
      })
    },
    /**
     * 消息提示
     */
    message(msg){
      this.$Message.error({
        content: msg,
        duration: 8
      })
    },
    /**
     * 重置密码
     */
    reset(){
      this.$Message.warning({
        content: '功能未开放'
      })
    },
    /**
     * 注册用户
     */
    register(){
      this.$Message.warning({
        content: '功能未开放'
      })
    }
  }
}
</script>

<style lang="less">
body{
  background-color: #f8f8f9;
}
.login-wrapper{
  background: url("../assets/images/body.svg");
  background-size:100%;
  width: 100%;
  height: 100%;
  .login-card{
    width: 365px;
    margin: 150px auto;
    padding: 0 16px;
    .login-title{
      text-align: center;
      border-bottom: 1px solid #e8eaec;
      padding-bottom: 16px;
      margin-bottom: 32px;
      img{
        display: inline-block;
        width: 100px;
        height: 100px;
        vertical-align: middle;
        border-style: none;
      }
    }
    .login-tip{
      text-align: center;
      margin: 32px 0 16px;
    }
  }
}
</style>
